/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
   <div class="edge-modal">
    <el-dialog
      custom-class="edge-dialogs"
      :modal="false"
      top="0"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="closeFormDialog"
    >
    <div slot="title" class="el-dialog__title edge-modal-title">
      <el-tooltip v-if="crossname && crossname.length > 41" placement="bottom-start">
        <div slot="content">{{crossname}}</div>
        <span class="devname">{{crossname.substr(0, 41) + '...'}}</span>
      </el-tooltip>
      <span v-else>{{crossname}}</span>
    </div>
    <div class="edge-box">
    <div class="operate">
      <div class="edit-btn" @click="onChooseLocationClick">
        <i class="iconfont icon-lukouguanli1"></i>
        <span>{{$t('openatc.home.editposition')}}</span>
      </div>
      <div class="detail-btn">
        <el-button type="text" @click="onExitDetailClick">{{$t('openatc.home.exitdetail')}}>></el-button>
      </div>
    </div>
    <div class="overview-content">
      <!-- <OverviewNew v-if="visible" :AgentId="agentid" /> -->
      <overview-component :AgentId="agentid" />
    </div>
  </div>
    </el-dialog>
    </div>
</template>

<script>
// import { getTheme } from '../../../../utils/auth.js'
// import OverviewNew from './overviewNew'
import { mapState } from 'vuex'

export default {
  name: 'edgeModal',
  props: {
  },
  // components: {
  //   OverviewNew
  // },
  computed: {
    ...mapState({
      editMode: state => state.globalVariable.posEditMode
    })
  },
  data () {
    return {
      deviceInfo: {},
      dialogVisible: false,
      agentid: '0',
      crossname: '',
      visible: true,
      lngLat: {
        lng: '0.00000000',
        lat: '0.00000000'
      }
    }
  },
  watch: {
    agentid: {
      handler: function (val, oldVal) {
        this.agentid = val
        this.visible = false
        this.$nextTick(() => {
          setTimeout(() => {
            this.visible = true
          }, 100)
        })
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    closeFormDialog () {
      this.dialogVisible = false
      this.visible = false
      this.$emit('handleCloseEdgeModal')
      const body = document.querySelector('#map')
      body.style.cursor = this.originStyle
      this.$store.dispatch('SetPosEditMode', false)
    },
    openEdge (dev, showModal) {
      console.log(dev)
      this.deviceInfo = JSON.parse(JSON.stringify(dev))
      this.agentid = dev.agentid
      this.crossname = dev.name
      this.map = window.map
      if (showModal) {
        this.dialogVisible = true
        this.visible = false
        this.$nextTick(() => {
          setTimeout(() => {
            this.visible = true
          }, 100)
        })
      }
    },

    onChooseLocationClick () {
      this.onLocationClick()
    },
    onLocationClick () {
      this.setDeviceLocation()
      this.$message.info(this.$t('openatc.gis.chooseLocationInfo'))
    },
    setNewLocation (lngLat) {
      this.deviceInfo.lng = lngLat.lng
      this.deviceInfo.lat = lngLat.lat
      console.log(this.deviceInfo)
      this.$emit('onUpdateClick', this.deviceInfo)
    },
    setDeviceLocation () {
      this.$store.dispatch('SetPosEditMode', true)
      let _this = this
      const body = document.querySelector('#map')
      this.originStyle = body.style.cursor
      body.style.cursor = 'crosshair'
      this.map.on('click', function (e) {
        if (!_this.editMode) return
        _this.lngLat.lng = String(e.latlng.lng)
        _this.lngLat.lat = String(e.latlng.lat)
        _this.setNewLocation(_this.lngLat)
        _this.map.off('click')
        body.style.cursor = _this.originStyle
        this.$store.dispatch('SetPosEditMode', false)
      })
    },
    onExitDetailClick () {
      this.dialogVisible = false
      // this.visible = false
      this.$emit('onExitDetailClick', this.deviceInfo)
    }
  },
  mounted () {
    this.map = window.map
  }
}
</script>
<style lang="scss">
.edge-modal{
  .el-dialog__wrapper {
    position: unset !important;
//     .el-dialog{
//       position: fixed !important;
//       left: 45%;
//       bottom: 40%;
//     }
  }
}
</style>
